<template>
  <h2>child组件</h2>
  <h3>msg:{{ msg }}</h3>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "child",
  props: ["msg"],
  /**
   * setup 细节：
   * setup 在 beforeCreate 之前执行，而且只执行一次
   * 无法使用this，说明无法通过this调用data/computed/methods/props中的相关内容
   * 其实所有的composition API相关回调函数中也都不可以
   *
   *
   *
   * setup中的返回值是一个对象，内部的属性和方法是给html模板使用的
   * setup中的对象内部的属性和data函数中的return对象的属性都可以在html模板中使用
   * setup中的对象中的属性和data函数中的对象中的属性会合并为组件对象的属性
   *
   * setup 不能是一个 async 函数：因为返回值不再是一个return的对象了，而是promise，模板看不到return对象中的属性数据
   */
  beforeCreate() {
    console.log("beforeCreate 执行了");
  },
  setup(props, { attrs, slots, emit }) {
    // props参数，是一个对象，里面有父级组件向子级别组件传递的数据，并且是在子组件中使用props接受到的所有的属性
    /**
     * props: 包含props配置声明且传入了的所有属性的对象
       attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
       slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
       emit: 用来分发自定义事件的函数, 相当于 this.$emit
     */
    console.log(props.msg);
    console.log(attrs.msg2);
    const emitXXXParent = () => {
      emit("emitXXX", "hello");
    };
    console.log("setup 执行了");
    const showMsg1 = () => {
      console.log("showMsg1");
    };
    return { showMsg1, emitXXXParent };
  },
  mounted() {
    console.log(this);
  },
  methods: {
    showMsg2() {
      console.log("showMsg2");
    },
  },
});
</script>
